let vm=new Vue({
	el:"#app",
	delimiters:["[[","]]"],
	data:{
		username:'',
		password:'',
		password2:'',
		mobile:'',
		allow:'',
		image_code:'',
		image_code_url: '',
		sms_code:'',

		error_username:false,
		error_password:false,
		error_password2:false,
		error_mobile:false,
		error_allow:false,
		error_image_code:false,
		sending_flag:false,
		error_sms_code:false,
		
		error_username_message:'',
		error_mobile_message:'',
		error_image_code_message:'',
		sms_code_tip:'获取短信验证码',
		error_sms_code_message:'',
	},
	mounted(){
		// 生成图形验证码
		this.generate_image_code();
    },
	methods:{
		generate_image_code(){
			 // 生成UUID。generateUUID() : 封装在common.js文件中，需要提前引入
			this.uuid = generateUUID();
			// 拼接图形验证码请求地址
			this.image_code_url = "/image_codes/" + this.uuid + "/";

		},
		check_username(){
			let re=/^[a-zA-Z0-9_-]{5,20}$/;
			
			if(re.test(this.username)){
				this.error_username=false;
			}else{
				this.error_username_message='请输入5-20个字符的用户名,不含特殊字符';
				this.error_username=true;
			}
			if(this.error_username == false){
				let url = '/usernames/' + this.username + '/count/';

				axios.get(url,{
					responseType: 'json'})
				.then(response => {
					if(response.data.count==1){
						this.error_username_message='用户名已经存在';
						this.error_username=true;
					}else{
						this.error_username=false;
					}
				})
				.catch(error =>{
					console.log(error.response);
				});
			}
		},
		
		check_password(){
			let re=/^[a-zA-Z0-9_-]{8,20}$/;
			if(re.test(this.password)){
				this.error_password=false;
			}else{
				this.error_password=true;
			}
			
		},
		
		check_password2(){
			
			if(this.password!=this.password2){
				this.error_password2=true;
			}else{
				this.error_password2=false;
			}
			
		},
		
		check_mobile(){
			let re=/^1[3-9]\d{9}$/;
			if(re.test(this.mobile)){
				this.error_mobile=false;
			}else{
				this.error_mobile_message='您输入的手机号格式不正确';
				this.error_mobile=true;
			}

			if(this.error_mobile == false){
				let url='/mobile/'+this.mobile+'/count/'
				axios.get(url,{
					responseType: 'json'
				})
					.then(response =>{
						if (response.data.count==1){
							this.error_mobile_message="该手机号已经注册";
							this.error_mobile=true;
						}else {
							this.error_mobile=false;
						}
					}).catch(error =>{
						console.log(error)
				})
			}
			
		},

        check_image_code() {
            if (this.image_code.length != 4) {
                this.error_image_code_message = '请输入图形验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }
        },
        check_sms_code(){
        	if(this.sms_code.length != 6){
	        	this.error_sms_code_message = '请填写短信验证码';
		        this.error_sms_code = true;
		    } else {
		        this.error_sms_code = false;
		    }
	        	
        },

		check_allow(){
			if(!this.allow){
				this.error_allow=true;
			}else{
				this.error_allow=false;
			}
		},
		send_sms_code(){
		    // 避免重复点击
		    if (this.sending_flag == true) {
		        return;
		    }
		    this.sending_flag = true;
		
		    // 校验参数
		    this.check_mobile();
		    this.check_image_code();
		    if (this.error_mobile == true || this.error_image_code == true) {
		        this.sending_flag = false;
		        return;
		    }

		    // 请求短信验证码
		    let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code+'&uuid='+ this.uuid;
		    console.log(url)
		    axios.get(url, {
		        responseType: 'json'
		    })
		        .then(response => {
		            if (response.data.code == '0') {
		                // 倒计时60秒
		                var num = 60;
		                var t = setInterval(() => {
		                    if (num == 1) {
		                        clearInterval(t);
		                        this.sms_code_tip = '获取短信验证码';
		                        this.sending_flag = false;
		                    } else {
		                        num -= 1;
		                        // 展示倒计时信息
		                        this.sms_code_tip = num + '秒';
		                    }
		                }, 1000, 60)
		            } else {
		                if (response.data.code == '4001') {
		                    this.error_image_code_message = response.data.errmsg;
		                    this.error_image_code = true;
		                } else { // 4002
		                    this.error_sms_code_message = response.data.errmsg;
		                    this.error_sms_code = true;
		                }
		                this.generate_image_code();
		                this.sending_flag = false;
		            }
		        })
		        .catch(error => {
		            console.log(error.response);
		            this.sending_flag = false;
		        })
		},
				
		on_submit(){
			this.check_username();
			this.check_password();
			this.check_password2();
			this.check_mobile();
			this.check_allow();
			
			if(this.error_username==true||this.error_password==true||this.error_password2==true||
				this.error_mobile==true||this.error_allow==true){
				
				//禁止表单提交
				window.event.returnValue=false;
			}
			
		}
		
	}
});

